<template>
    <el-dialog
        v-model="menuDetailVisible"
        title="菜单详情"
        @close="handleClose"
        center
        draggable
        align-center
    >
        <div class="menu-detail">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <el-text type="primary">基本信息</el-text>
                    </div>
                </template>
                <el-row>
                    <el-col :span="24">菜单ID: {{ menuDetail.id }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">菜单名称: {{ t(menuDetail.name) }}</el-col>
                </el-row>
                <el-row v-if="menuDetail.parentId">
                    <el-col :span="24">上级菜单ID: {{ menuDetail.parentId }}</el-col>
                </el-row>
                <el-row v-if="menuDetail.parentId">
                    <el-col :span="24">上级菜单名称: {{ t(menuDetail.parentName) }}</el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">请求地址: {{ menuDetail.url }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">菜单权限值: {{ menuDetail.perms }}</el-col>
                </el-row>
            </el-card>
            <el-card>
                <template #header>
                    <div class="card-header">
                        <el-text type="success">前端配置</el-text>
                    </div>
                </template>
                <el-row>
                    <el-col :span="12">侧边栏隐藏: {{ menuDetail.hiddenDesc }}</el-col>
                    <el-col :span="12">始终显示根菜单: {{ menuDetail.alwaysShowDesc }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">重定向地址: {{ menuDetail.redirect }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">外层组件: {{ menuDetail.component }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">外部链接: {{ menuDetail.href }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">菜单图标: {{ menuDetail.icon }}</el-col>
                    <el-col :span="8" v-if="menuDetail.icon">
                        <template v-if="menuDetail.icon.includes(':')">
                            <inconify :icon="menuDetail.icon" />
                        </template>
                        <template v-else>
                            <local-svg-icon :name="menuDetail.icon" />
                        </template>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">菜单类型: {{ menuDetail.menuTypeDesc }}</el-col>
                    <el-col :span="12">页面不缓存: {{ menuDetail.noCacheDesc }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">附加标签视图: {{ menuDetail.affixDesc }}</el-col>
                    <el-col :span="12">面包屑显示: {{ menuDetail.breadcrumbDesc }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">激活菜单: {{ menuDetail.activeMenu }}</el-col>
                </el-row>
            </el-card>
            <el-card>
                <template #header>
                    <div class="card-header">
                        <el-text type="info">附加信息</el-text>
                    </div>
                </template>
                <el-row>
                    <el-col :span="12">显示序号: {{ menuDetail.seqNo }}</el-col>
                    <el-col :span="12"
                        >部门状态:
                        <el-tag v-if="menuDetail.status" type="success">
                            {{ menuDetail.statusDesc }}
                        </el-tag>
                        <el-tag v-else type="danger">
                            {{ menuDetail.statusDesc }}
                        </el-tag>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">创建人: {{ menuDetail.createBy }}</el-col>
                    <el-col :span="12">创建时间: {{ menuDetail.createTime }}</el-col>
                </el-row>
                <el-row v-if="menuDetail.updateBy">
                    <el-col :span="12">更新人: {{ menuDetail.updateBy }}</el-col>
                    <el-col :span="12">更新时间: {{ menuDetail.updateTime }}</el-col>
                </el-row>
                <el-row v-if="menuDetail.remark">
                    <el-col :span="24">备注: {{ menuDetail.remark }}</el-col>
                </el-row>
            </el-card>
        </div>
    </el-dialog>
</template>

<script setup>
import { reactive, watch, inject } from 'vue'
import { Icon as inconify } from '@iconify/vue'
import LocalSvgIcon from '@/components/LocalSvgIcon/index.vue'
const { menuDetailVisible, selectedRow } = inject('menuDetail')
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const menuDetail = reactive({
    id: undefined,
    name: undefined,
    parentId: undefined,
    parentName: undefined,
    seqNo: undefined,
    menuType: undefined,
    menuTypeDesc: undefined,
    url: undefined,
    perms: undefined,
    status: undefined,
    statusDesc: undefined,
    hidden: undefined,
    hiddenDesc: undefined,
    alwaysShow: undefined,
    alwaysShowDesc: undefined,
    redirect: undefined,
    component: undefined,
    href: undefined,
    icon: undefined,
    noCache: undefined,
    noCacheDesc: undefined,
    affix: undefined,
    affixDesc: undefined,
    breadcrumb: undefined,
    breadcrumbDesc: undefined,
    activeMenu: undefined,
    createBy: undefined,
    createTime: undefined,
    updateBy: undefined,
    updateTime: undefined,
    remark: undefined
})

watch(
    () => selectedRow.value,
    (newValue) => {
        if (newValue) {
            Object.assign(menuDetail, newValue)
        }
    },
    { immediate: true } // 立即以当前路由的值为触发条件
)
// 重置 menuDetail 的函数
const resetMenuDetail = () => {
    Object.keys(menuDetail).forEach((key) => {
        menuDetail[key] = undefined
    })
}
// 处理对话框关闭事件
function handleClose() {
    resetMenuDetail()
}
</script>
<style lang="scss" scoped>
.menu-detail {
    background-color: #f5f5f5;
    padding: 20px;
    & .el-card {
        @include border();
        margin-bottom: 15px;
        & .el-row {
            margin-bottom: 20px;
            & .icon-preview {
                margin-bottom: 30px;
                width: 800px;
                @include flex-center;
                & .icon-box {
                    width: 100%;
                    height: 100%;
                    @include grid-center;
                }
            }
        }
    }
}
</style>
